<template>
  <div id='ground' :style='size'>
    <chart ref='chart1' :options='options' :style='size' :auto-resize='true'></chart>
  </div>
</template>

<script>
  import graphic from '../../node_modules/echarts/lib/util/graphic.js'
  export default {
    name: 'pie',
    data () {
      return {
        xdata: ['2月', '3月', '3月', '3月', '3月', '4月', '4月', '4月', '4月', '4月', '4月', '4月', '4月', '4月', '5月', '11月', '11月', '12月'],
        legendData: ['PM2.5日均值', 'PM10日均值', 'Pm25/Pm10'],
        dataArr: [75, 52, 146, 112, 29, 64, 24, 70, 87, 67, 71, 49, 79, 75, 43, 147, 23, 42],
        dataArr2: [156, 195, 267, 230, 259, 143, 195, 325, 327, 117, 275, 182, 163, 167, 174, 221, 135, 167],
        dataArr3: [48.1, 26.7, 54.7, 48.7, 11.2, 44.8, 12.3, 21.5, 26.6, 57.3, 25.8, 26.9, 48.5, 44.9, 24.7, 66.5, 17.0, 25.1],
        colorSet: new graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#00CAE0'
        }, {
          offset: 1,
          color: '#006EFB'
        }]),
        colorSet2: new graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#E37552'
        }, {
          offset: 1,
          color: '#9E5431'
        }]),
        colorSet3: new graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: '#00da9c'
        }, {
          offset: 1,
          color: '#007a55'
        }]),
        options: {},
        size: {
          width: '100%',
          height: '100%'
        },
        unit: '',
        title: ''
      }
    },
    computed: {},
    mounted () {
      this.options = {
        backgroundColor: 'rgba(255, 255, 255, 0)',
        // backgroundColor: '#000',
        title: {
          top: '0',
          left: 'center',
          text: '2018年沙尘天气PM10浓度变化',
          textStyle: {
            align: 'center',
            color: '#FFFFFF',
            fontSize: 15
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: this.legendData,
          align: 'right',
          top: '8%',
          right: '1%',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        calculable: true,
        xAxis: [{
          type: 'category',
          axisLabel: {
            textStyle: {
              fontSize: 14,
              color: '#fff'
            }
          },
          axisLine: {
            lineStyle: {
              // color: '#00A2FF',
              color: '#fff'
              // width: 2
            }
          },
          axisTick: {
            show: false
          },
          // splitLine: {
          //     lineStyle: {
          //         type: 'dashed',
          //         color: '#DDD'
          //     }
          // },
          data: this.xdata
        }],
        yAxis: [{
          type: 'value',
          // name: '总价(万元)',
          axisLabel: {
            formatter: '{value}',
            // color: '#65F5FD',
            color: '#fff',
            fontSize: 14
          },
          axisLine: {
            lineStyle: {
              color: '#fff'
              // color:'65F5FD'
            }
          },
          // axisTick: {
          //   show: false
          // },
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed',
              color: '#385B71'
            }
          }
        }],
        series: [{
          name: this.legendData[0],
          type: 'bar',
          barWidth: '45%', // 柱子宽度
          barGap: 1, // 柱子之间间距
          itemStyle: {
            normal: {
              color: this.colorSet
              // barBorderRadius: 10,
            }
          },
          data: this.dataArr
        }, {
          name: this.legendData[1],
          type: 'bar',
          barWidth: '45%', // 柱子宽度
          barGap: 1, // 柱子之间间距
          itemStyle: {
            normal: {
              color: this.colorSet2
              // barBorderRadius: 10,
            }
          },
          data: this.dataArr2
        }, {
          name: this.legendData[2],
          type: 'bar',
          barWidth: '45%', // 柱子宽度
          barGap: 1, // 柱子之间间距
          itemStyle: {
            normal: {
              color: this.colorSet3
              // barBorderRadius: 10,
            }
          },
          data: this.dataArr3
        }]
      }
      window.addEventListener('resize', function () {
        this.$refs.chart1.resize()
      })
    }
  }
</script>
<style>
  .echarts {
    width: 100%;
    height: 100%;
  }
</style>
